<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>First React</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- 在网页中添加 React 支持，可以到下面的网站复制内容。 -->
    <!-- https://legacy.reactjs.org/docs/cdn-links.html -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>

    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>

    <!-- 在网页中添加 JSX 支持，可以到下面的网站复制内容。 -->
    <!-- https://babeljs.io/ -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      const App = () => {
        const a = "入门教程";

        const handleClick = (event) => {
          console.log("Clicked!");
          console.log(event);
        };

        return (
          // Javascript 注释
          <div>
            {/* JSX 注释 */}
            <div>
              <p className="text">App</p>
            </div>

            <p>This is a {a}</p>

            <button onClick={handleClick}>Click Me!</button>

            <button onClick={() => console.log("Click 2")}>Click Me 2!</button>
          </div>
        );
      };

      // ReactDOM.render(<App />, document.getElementById("app"));

      const container = document.getElementById("app");
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    </script>
  </body>
</html>
